<form id="form-garland" class="pure-form pure-form-aligned  form-settings">
    <div class="panel" id="panel-garland">

        <div class="header">
            <h1>GARLAND</h1>
            <h2>Garland configuration</h2>
        </div>

        <div class="page">

            <div class="pure-control-group">
                <label>Enabled</label>
                <input class="checkbox-toggle checkbox-garland-enable" type="checkbox" name="garlandEnabled" data-action="none">
            </div>

            <div class="pure-control-group">
                <label>Brightness</label>
                <input class="slider slider-garland-brightness pure-input-3-4" type="range" min="12" max="254" id="garlandBrightness" data-action="none">
            </div>

            <div class="pure-control-group">
                <label>Speed</label>
                <input class="slider slider-garland-speed  pure-input-3-4" type="range" min="10" max="70" id="garlandSpeed" data-action="none">
            </div>

            <button type="button" class="pure-button button-garland-set-default">Set default</button>

        </div>
    </div>
</form>
